<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线聊天室</title>
    <link href="../static/css/bootstrap5.min.css" th:href="@{/css/bootstrap5.min.css}" rel="stylesheet"/>
    <script src="https://cdn.bootcdn.net/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/sockjs-client/1.6.1/sockjs.min.js"></script>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f8f9fa;
        }
        .navbar {
            background-color: #343a40;
        }
        .navbar-brand {
            color: #fff;
            font-weight: bold;
        }
        .navbar-nav .nav-link {
            color: #fff;
        }
        .chat-container {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            margin-top: 20px;
            padding: 20px;
            overflow-y: auto;
            height: 400px; /* 设置聊天区域高度 */
        }
        .message-container {
            display: flex;
            flex-direction: column;
            margin-bottom: 10px;
        }
        .message {
            padding: 8px 12px;
            margin-bottom: 8px;
            border-radius: 4px;
        }
        .message.sent {
            background-color: #007bff;
            color: #fff;
            align-self: flex-end;
        }
        .message.received {
            background-color: #f0f0f0;
            color: #333;
            align-self: flex-start;
        }
        .username {
            font-size: 0.8rem;
            color: #777;
            margin-bottom: 2px;
        }
        .message-container.sent .username {
            text-align: right;
        }
        .input-area {
            margin-top: 15px;
            display: flex;
        }
        .input-area input[type="text"] {
            flex-grow: 1;
            border-radius: 4px 0 0 4px;
            border: 1px solid #ced4da;
            padding: 10px;
        }
        .input-area button {
            border-radius: 0 4px 4px 0;
        }
    </style>
</head>
<body>
<!-- 顶部导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
        <a class="navbar-brand" href="/client/index" style="display: flex; align-items: center;">
            <img alt="Logo" width="30" height="30" class="d-inline-block" src="../static/logo.png" th:src="@{/logo.png}" style="margin-right: 2px;">
            Geek思想
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="/chatOnline">首页</a>
                </li>
<!--                <li class="nav-item">-->
<!--                    <a class="nav-link" href="#">关于我们</a>-->
<!--                </li>-->
<!--                <li class="nav-item">-->
<!--                    <a class="nav-link" href="#">服务</a>-->
<!--                </li>-->
<!--                <li class="nav-item">-->
<!--                    <a class="nav-link" href="#">联系我们</a>-->
<!--                </li>-->
            </ul>
        </div>
    </div>
</nav>

<div class="container mt-4">
    <div class="chat-container d-flex flex-column">
        <div class="message-container received">
        </div>
        <div class="message-container sent">
        </div>
    </div>
</div>

<div class="input-area d-flex justify-content-center">
    <input type="text" class="form-control" placeholder="输入消息...">
    <button class="btn btn-primary">发送</button>
</div>
</div>

<script src="../../static/js/popper.min.js" th:src="@{/js/popper.min.js}"></script>
<script src="../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap5.min.js}"></script>
<script>
    var stompClient = null;
    var currentUser = null;
    $(document).ready(function() {
        // 获取用户名（示例使用prompt，实际项目应使用登录系统）
        currentUser = '极客' + Date.now();
        // 连接WebSocket
        connect();

        // 发送消息按钮
        $(".input-area button").click(function() {
            sendMessage();
        });

        // Enter键发送消息
        $(".input-area input[type='text']").keypress(function(event) {
            if (event.which === 13) {
                sendMessage();
                return false;
            }
        });
    });
    function connect() {
        var socket = new SockJS('/ws');
        stompClient = Stomp.over(socket);

        stompClient.connect({}, function(frame) {
            console.log('Connected: ' + frame);
            stompClient.subscribe('/topic/messages', function(message) {
                showMessage(JSON.parse(message.body));
            });
        });
    }

    function sendMessage() {
        var messageText = $(".input-area input[type='text']").val().trim();
        if (messageText) {
            var chatMessage = {
                sender: currentUser,
                content: messageText,
                type: 'CHAT'
            };

            stompClient.send("/app/chat", {}, JSON.stringify(chatMessage));
            $(".input-area input[type='text']").val('');
        }
    }

    function showMessage(message) {
        var messageClass = message.sender === currentUser ? 'sent' : 'received';
        addLocalMessage(message.sender, message.content, messageClass); // 显示接收到的消息时显示发送者用户名
    }

    function addLocalMessage(sender, text, type) {
        var messageContainer = $('<div>').addClass('message-container ' + type);
        var usernameDiv = $('<div>').addClass('username').text(sender);
        var messageDiv = $('<div>').addClass('message ' + type).text(text);
        messageContainer.append(usernameDiv).append(messageDiv);
        $(".chat-container").append(messageContainer);
        $(".chat-container").scrollTop($(".chat-container")[0].scrollHeight);
    }
</script>
</body>
</html>